<template>
    <div class="indexMain" id="indexMain">
        <img src="../assets/images/index/bg.png" class="allBg" />
        <div class="header" style="zoom: 0.64;">
            <img src="../assets/images/index/topAll.png" class="hearderImg" />
            <!-- <div>
                <b>1</b>
                <span>2</span>
                <label>3</label>
            </div> -->
        </div>
        <div class="centerContent" style="zoom: 0.44;">
            <div class="leftContent">
                <div class="title">
                    <label> 骨干网络 </label>
                </div>
                <div class="bgPngWrapper">
                    <div class="bgPng">
                        <div class="bgPngTitle">·CHINANET骨干网络</div>
                        <div class="unitShow">
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="0" :to="topEight.top1" :duration="duration" :key="key"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle rotating-circle1"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="0" :to="topEight.top2" duration="1000"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle rotating-circle2"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="0" :to="topEight.top3" :duration="duration" :key="key"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle rotating-circle3"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="0" :to="topEight.top4" duration="1000"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bgPng">
                        <div class="bgPngTitle">·CN2骨干网络</div>
                        <div class="unitShow">
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="10" :to="topEight.top5" :duration="duration" :key="key"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle rotating-circle3"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="30" :to="topEight.top6" duration="1000"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle rotating-circle2"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="79" :to="topEight.top7" :duration="duration" :key="key"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="circle-container">
                                    <!-- 外层旋转的圆圈 -->
                                    <div class="rotating-circle rotating-circle1"></div>
                                    <!-- 内部不旋转的文字容器 -->
                                    <div class="text-content">
                                        <span class="number"> <animate-number from="200" :to="topEight.top8" duration="1000"></animate-number></span>
                                        <span class="unit">单位</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <label> 组网专线 </label>
                </div>
                <div class="bgPngWrapper">
                    <div class="bgPng height653">
                        <div class="bgPngTitle">·CHINANET骨干网络</div>
                        <div class="chartCircle"><animate-number from="100" :to="centerOne.value" :duration="centerOne.duration" :key="centerOne.key"></animate-number></div>
                        <div class="chartHalf">
                            <label class="halfSpare color1"></label>
                            <span class="halfTitle"> 国际网络节点： </span>
                            <span class="halfNum">218个</span>
                        </div>
                        <div class="chartHalf">
                            <label class="halfSpare color2"></label>
                            <span class="halfTitle"> 国际网络节点： </span>
                            <span class="halfNum">218个</span>
                        </div>
                        <div class="chartHalf">
                            <label class="halfSpare color3"></label>
                            <span class="halfTitle"> 传输节点： </span>
                            <span class="halfNum">118个</span>
                        </div>
                        <div class="chartHalf">
                            <label class="halfSpare color4"></label>
                            <span class="halfTitle"> CN2节点： </span>
                            <span class="halfNum">218个</span>
                        </div>
                        <div class="chartHalf">
                            <label class="halfSpare color5"></label>
                            <span class="halfTitle"> XXX网络节点： </span>
                            <span class="halfNum">26个</span>
                        </div>
                    </div>
                    <div class="bgPng height653">
                        <div class="bgPngTitle">·宽带数据分析</div>
                        <div class="dataR">
                            <div class="itemR">
                                <img src="../assets/images/index/r1.png" />
                                <div>
                                    <label class="label"><animate-number from="2000" to="3960" duration="1000"></animate-number>Gbps</label>
                                    <span class="span">国际出口总宽带</span>
                                </div>
                            </div>
                            <div class="itemR">
                                <img src="../assets/images/index/r2.png" />
                                <div>
                                    <label class="label"><animate-number from="3000" to="5866" duration="1000"></animate-number>Gbps</label>
                                    <span class="span">国际Trabsit总宽带</span>
                                </div>
                            </div>
                            <div class="itemR">
                                <img src="../assets/images/index/r3.png" />
                                <div>
                                    <label class="label"><animate-number from="3000" to="7000" duration="1000"></animate-number>Gbps</label>
                                    <span class="span">国际客户总宽带</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bgPng height653">
                        <div class="bgPngTitle">·规模数据分析</div>
                        <div class="rightRange">
                            <div class="rangeLeft">
                                <img src="../assets/images/index/43.png" class="img1" />
                                <img src="../assets/images/index/31.png" class="img2" />
                                <img src="../assets/images/index/81.png" class="img3" />
                                <div><animate-number from="100" to="245" duration="1000"></animate-number></div>
                            </div>
                            <div class="rangeRight">
                                <img src="../assets/images/index/35.png" class="img1" />
                                <img src="../assets/images/index/36.png" class="img2" />
                                <img src="../assets/images/index/81.png" class="img3" />
                                <div><animate-number from="100" to="135" duration="1000"></animate-number></div>
                            </div>
                            <div class="rangeLeft">
                                <img src="../assets/images/index/32.png" class="img1" />
                                <img src="../assets/images/index/33.png" class="img2" />
                                <img src="../assets/images/index/81.png" class="img3" />
                                <div><animate-number from="10" to="333" duration="1000"></animate-number></div>
                            </div>
                            <div class="rangeRight">
                                <img src="../assets/images/index/37.png" class="img1" />
                                <img src="../assets/images/index/21.png" class="img2" />
                                <img src="../assets/images/index/81.png" class="img3" />
                                <div><animate-number from="170" to="666" duration="1000"></animate-number></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <label> CN2国际网络 </label>
                </div>
                <div class="allWrapper">
                    <div class="allWrapper-title">·规模数据分析</div>
                    <div class="allWrapper-content">
                        <div class="allWrapper-content-one allWrapper-content-content">
                            <p class="first">
                                <b class="b"> <animate-number from="100" :to="centerTwo.value" :duration="centerTwo.duration" :key="centerTwo.key"></animate-number> </b>
                                <span class="span"> 个 </span>
                            </p>
                            <p class="secord">
                                <label class="label">客户</label>
                            </p>
                        </div>
                        <div class="allWrapper-content-two allWrapper-content-content">
                            <p class="first">
                                <b class="b"> <animate-number from="100" :to="centerThree.value" :duration="centerThree.duration" :key="centerThree.key"></animate-number> </b>
                                <span class="span">个 </span>
                            </p>
                            <p class="secord">
                                <label class="label">国际网络设备</label>
                            </p>
                        </div>
                        <div class="allWrapper-content-three allWrapper-content-content">
                            <p class="first">
                                <b class="b"> <animate-number from="1" :to="centerFour.value" :duration="centerFour.duration" :key="centerFour.key"></animate-number> </b>
                                <span class="span">个 </span>
                            </p>
                            <p class="secord">
                                <label class="label">覆盖城市</label>
                            </p>
                        </div>
                        <div class="allWrapper-content-four allWrapper-content-content">
                            <p class="first">
                                <b class="b"> <animate-number from="100" to="367" duration="1000"></animate-number> </b>
                                <span class="span">个 </span>
                            </p>
                            <p class="secord">
                                <label class="label">互联运营商</label>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <label> 中国电信全球光缆资源 </label>
                </div>
                <div class="allWrapperBg">
                    <div class="resourceItem">
                        <div class="resourceItem-bg">
                            <animate-number from="5" to="47" duration="1000"></animate-number>
                        </div>
                        <div class="resourceItem-text">海缆数</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="95" to="117" duration="1000"></animate-number></div>
                        <div class="resourceItem-text">国际骨干中继 宽带</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="95" to="241" duration="1000"></animate-number></div>
                        <div class="resourceItem-text">国际网络节点</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="3" to="21" duration="1000"></animate-number></div>
                        <div class="resourceItem-text">海外POP点</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="3" to="90" duration="1000"></animate-number></div>
                        <div class="resourceItem-text">全球合作运营商</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="7" to="75" duration="1000"></animate-number></div>
                        <div class="resourceItem-text">国内国际互联网出口宽带份额</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="1" to="10" duration="1000"></animate-number>亿</div>
                        <div class="resourceItem-text">国际光缆年均投资额</div>
                    </div>
                    <div class="resourceItem">
                        <div class="resourceItem-bg"><animate-number from="95" to="335" duration="1000"></animate-number>万</div>
                        <div class="resourceItem-text">护航重点行业</div>
                    </div>
                </div>
            </div>
            <div class="centerContent"></div>
            <div class="rightContent">
                <div class="title">
                    <label> 上网专线 </label>
                </div>
                <div class="internet">
                    <div class="internet-left">
                        <div class="internet-left-wrapper">
                            <div class="internet-left-title">高宽带</div>
                            <div class="internet-left-content">
                                <label class="label posi1">成本下降</label>
                                <label class="posi2">
                                    <b class="b">20</b>
                                    <label class="percent">%</label>
                                </label>
                                <label class="label posi3">网络传输宽带提升</label>
                                <label class="posi4">
                                    <b class="b">4</b>
                                    <label class="percent">倍</label>
                                </label>
                                <label class="label posi5">单比特能耗降低</label>
                                <label class="posi6">
                                    <b class="b">40</b>
                                    <label class="percent">%</label>
                                </label>
                                <label class="label2 posi7">400G</label>
                                <label class="posi8">
                                    <label class="text">单波</label>
                                </label>
                            </div>
                            <div class="internet-left-process">从单线单波100G升级到 <span>单波400G</span></div>
                        </div>
                    </div>
                    <div class="internet-center">
                        <div class="internet-center-img">
                            <label class="label1">上网专线</label>
                            <label class="label2">
                                延迟低

                                <div class="arrow-container">
                                    <span class="arrow"><img src="../assets/images/index/delay/1.png" /> </span>
                                    <span class="arrow"><img src="../assets/images/index/delay/2.png" /> </span>
                                    <span class="arrow"><img src="../assets/images/index/delay/3.png" /> </span>
                                </div>
                            </label>
                            <label class="label3"
                                >可靠性
                                <div class="arrow-container">
                                    <span class="arrow"><img src="../assets/images/index/reliable/1.png" /> </span>
                                    <span class="arrow"><img src="../assets/images/index/reliable/2.png" /> </span>
                                    <span class="arrow"><img src="../assets/images/index/reliable/3.png" /> </span>
                                </div>
                            </label>
                            <label class="label4"
                                >网速快
                                <div class="arrow-container">
                                    <span class="arrow"><img src="../assets/images/index/speed/1.png" /> </span>
                                    <span class="arrow"><img src="../assets/images/index/speed/2.png" /> </span>
                                    <span class="arrow"><img src="../assets/images/index/speed/3.png" /> </span>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="internet-right">
                        <div class="internet-left-wrapper">
                            <div class="internet-left-title">广覆盖</div>
                            <div class="internet-right-img"></div>
                            <div class="internet-right-text">
                                <label>5000</label>多个核心汇聚<span><label>3.5</label>万个综合接入区</span>
                            </div>
                            <div class="internet-right-text">中国电信OTN精品光网覆盖全国<label>345</label>个城市</div>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <label> 组网专线 </label>
                </div>
                <div class="project-line">
                    <div class="table">
                        <div class="table-header">
                            <div class="col1">类型/能力</div>
                            <div class="col2">典型传输速率</div>
                            <div class="col3">抗干扰能力</div>
                            <div class="col4">覆盖能力</div>
                        </div>
                        <div class="table-body">
                            <div class="col1">电力线</div>
                            <div class="col2">&gt;500Mbps</div>
                            <div class="col3">
                                <div class="level1">较弱</div>
                            </div>
                            <div class="col4">&lt;300M</div>
                        </div>
                        <div class="table-body">
                            <div class="col1">网线</div>
                            <div class="col2">&lt;1000Mbps</div>
                            <div class="col3">
                                <div class="level2">一般</div>
                            </div>
                            <div class="col4">&lt;100M</div>
                        </div>
                        <div class="table-body">
                            <div class="col1">光纤</div>
                            <div class="col2">&lt;100Gbps</div>
                            <div class="col3">
                                <div class="level3">很好</div>
                            </div>
                            <div class="col4">无上限</div>
                        </div>
                    </div>
                    <div class="dedicated-line">
                        <div class="dedicated-line-img">
                            <img src="../assets/images/index/26.png" class="img1" />
                            <img src="../assets/images/index/24.png" class="img2" />
                            <img src="../assets/images/index/28.png" class="img3" />
                            <img src="../assets/images/index/24.png" class="img4" />
                            <img src="../assets/images/index/27.png" class="img5" />
                            <img src="../assets/images/index/24.png" class="img6" />
                            <img src="../assets/images/index/29.png" class="img7" />
                            <div class="zx one">MSTP专线</div>
                            <div class="zx two">光纤专线</div>
                            <div class="zx three">SD-WAN专线</div>
                            <div class="dedicated-line-text">跨越互通互联,<label>5G切片</label>专线分钟级快速组网</div>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <label> 国际专线 </label>
                </div>
                <div class="project-echarts">
                    <div class="table">
                        <indexEcharts></indexEcharts>
                    </div>
                    <div class="dedicated-line">
                        <img src="../assets/images/index/1bg.png" />
                    </div>
                </div>
                <div class="title">
                    <label> IDC数据中心 </label>
                </div>
                <div class="internet">
                    <div class="internet-left" style="width: 500px">
                        <div class="internet-left-wrapper">
                            <img src="../assets/images/index/img1.png" class="wp100" style="margin-top: 40px" />
                        </div>
                    </div>
                    <div class="internet-center">
                        <div class="internet-center-img"><img src="../assets/images/index/img2.png" class="wp100" style="margin-top: -66px" /></div>
                    </div>
                    <div class="internet-right" style="width: 500px">
                        <div class="internet-left-wrapper"><img src="../assets/images/index/img3.png" class="wp100" style="margin-top:60px" /></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import indexEcharts from "../components/indexEcharts.vue"
// var time1 = null
// var time2 = null
// var time3 = null
// var time4 = null
export default {
    name: "indexMain",
    components: {indexEcharts},
    data() {
        return {
            duration: 1000,
            key: Math.random(),
            num: 1000,
            topEight: {
                top1: 500,
                top2: 100,
                top3: 400,
                top4: 1500,
                top5: 260,
                top6: 654,
                top7: 487,
                top8: 1084
            },
            centerOne: {
                value: 456,
                duration: 1000,
                key: Math.random()
            },
            centerTwo: {
                value: 376,
                duration: 1000,
                key: Math.random()
            },
            centerThree: {
                value: 237,
                duration: 1000,
                key: Math.random()
            },
            centerFour: {
                value: 26,
                duration: 1000,
                key: Math.random()
            },
            time1: "",
            time2: "",
            time3: ""
        }
    },
    computed: {},
    mounted() {
        let that = this
        this.$nextTick(function () {
            // 监听屏幕缩放
            window.addEventListener(
                "resize",
                function () {
                    that.setPosition()
                },
                false
            )
            that.setPosition()
        })
    },
    created() {},
    methods: {
        getDate() {
            //                var date = new Date()
            //   // 获取时间：时分秒
            //   const hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
            //   const minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
            //   const secound = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
            //   this.datetime = hour + ':' + minute + ':' + secound
            //   // 获取日期：年月日
            //   const year = date.getFullYear()
            //   const month = date.getMonth() + 1
            //   const day = date.getDate()
            //   this.nowDate = month + "月" + day + "日"
            //   this.nowYear = year + "年"
            //   // 获取星期几
            //   const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            //   this.nowWeek = weeks[new Date().getDay()];
            //   this.time1=
        },
        setPosition() {
            this.setRandom()
            // if (document.getElementById("indexMain")) {
            //     document.getElementById("indexMain").style["zoom"] = window.innerWidth / 5760
            // }
        },
        setRandom() {
            let that = this

            setInterval(() => {
                // if (time1) {
                //     clearTimeout(time1)
                // }
                // if (time2) {
                //     clearTimeout(time2)
                // }
                // if (time3) {
                //     clearTimeout(time3)
                // }
                // if (time4) {
                //     clearTimeout(time4)
                // }
                var mathValue = parseInt(Math.random() * 10000)
                let value = 0
                if (mathValue % 2 == 0) {
                    that.topEight.top1++
                    that.topEight.top3++
                    that.topEight.top5++
                    that.topEight.top7++
                    that.duration = 100
                    that.key = Math.random()
                }

                if (mathValue % 3 == 0) {
                    value = that.centerOne.value
                    value++
                    that.centerOne.value = value
                    that.centerOne.duration = 100
                    that.centerOne.key = Math.random()
                }

                if (mathValue % 7 == 0) {
                    value = that.centerTwo.value
                    value++
                    that.centerTwo.value = value
                    that.centerTwo.duration = 100
                    that.centerTwo.key = Math.random()
                }

                if (mathValue % 5 == 0) {
                    value = that.centerThree.value
                    value++
                    that.centerThree.value = value
                    that.centerThree.duration = 100
                    that.centerThree.key = Math.random()
                }

                if (mathValue % 11 == 0) {
                    value = that.centerFour.value
                    value++
                    that.centerFour.value = value
                    that.centerFour.duration = 100
                    that.centerFour.key = Math.random()
                }
            }, 1000 * 15)
        }
    }
}
</script>

<style scoped lang="scss">
/* 直接先用 5760 * 2160 的设计稿 
左：1585
中：占据剩余宽度（5760 - 1585 * 2 = 2540）
右：1585
*/
.indexMain {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0;
    margin: 0;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .wp100 {
        width: 100%;
    }
    .allWrapperBg {
        background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
            rgba(7, 24, 57, 0.7);
        padding: 24px 34px 24px 32px;
        display: flex;

        .resourceItem {
            width: 163px;
            height: 226px;
            margin-left: 24px;
            .resourceItem-bg {
                color: #ffd04f;
                text-align: center;
                font-family: "Alibaba PuHuiTi";
                font-size: 50px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                background: url("../assets/images/index/9.png") no-repeat top left;
                background-size: 100%;
                width: 163px;
                height: 146.925px;
                margin-bottom: 5px;
            }
            .resourceItem-text {
                color: #fff;
                text-align: center;
                font-family: "Alibaba PuHuiTi";
                font-size: 23px;
                font-style: normal;
                font-weight: 400;
                line-height: normal;
            }
        }
    }
    .allWrapper {
        display: flex;
        padding: 24px 34px 24px 32px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 16px;
        flex: 1 0 0;
        align-self: stretch;
        margin-bottom: 28px;
        background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
            rgba(7, 24, 57, 0.7);

        .allWrapper-title {
            color: rgba(255, 255, 255, 0.85);
            font-family: "Alibaba PuHuiTi";
            font-size: 26px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            letter-spacing: 0.78px;
        }
        .allWrapper-content {
            height: 200px;
            margin-top: 16px;
            display: flex;
            .allWrapper-content-content {
                width: 351px;
                height: 200px;
                margin-right: 38px;
                border-radius: 20px;
                text-align: center;
                background: linear-gradient(104deg, rgba(151, 198, 255, 0.05) 2.3%, rgba(0, 116, 255, 0.05) 103.14%);
                .first {
                    height: 100px;
                    padding-top: 10px;
                }
                .secord {
                    height: 100px;
                }
                p {
                    margin: 0;
                    .b {
                        color: #00e1ef;
                        text-align: center;
                        font-family: Inter;
                        font-size: 79px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: normal;
                    }
                    .span {
                        color: #edae5d;
                        text-align: center;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 36.036px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 72px;
                    }
                    .label {
                        color: rgba(255, 255, 255, 0.85);
                        text-align: center;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 25px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 1.261px;
                    }
                }
            }
            .allWrapper-content-one {
                background: url("../assets/images/index/5.png") no-repeat top left;
                background-size: 100%;
            }
            .allWrapper-content-two {
                background: url("../assets/images/index/6.png") no-repeat top left;
                background-size: 100%;
            }
            .allWrapper-content-three {
                background: url("../assets/images/index/7.png") no-repeat top left;
                background-size: 100%;
            }
            .allWrapper-content-four {
                background: url("../assets/images/index/8.png") no-repeat top left;
                background-size: 100%;
            }
        }
    }
    .bgPngWrapper {
        width: 100%;
        display: flex;
        /* height: 240px; */
        margin-bottom: 28px;
        .height653 {
            height: 653px !important;
            margin-right: 10px;
            .rightRange {
                position: relative;
                margin-top: 36px;
                margin-left: 32px;
                .rangeLeft {
                    font-size: 12px;
                    height: 118px;
                    position: relative;
                    margin-bottom: 11px;
                    .img1 {
                    }
                    .img2 {
                        position: absolute;
                        top: 0;
                    }
                    .img3 {
                        position: absolute;
                        left: 86px;
                        bottom: 8px;
                    }
                    div {
                        position: absolute;
                        left: 135px;
                        bottom: 8px;
                        width: 165px;
                        height: 50px;
                        line-height: 46px;
                        text-align: center;
                        color: #edae5d;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 38px;
                        font-style: normal;
                        font-weight: 700;
                        letter-spacing: 3.8px;
                    }
                }
                .rangeRight {
                    font-size: 12px;
                    height: 118px;
                    position: relative;
                    margin-left: 143px;
                    margin-bottom: 11px;
                    .img1 {
                    }
                    .img2 {
                        position: absolute;
                        top: 0;
                    }
                    .img3 {
                        position: absolute;
                        left: 86px;
                        bottom: 8px;
                    }
                    div {
                        position: absolute;
                        left: 135px;
                        bottom: 8px;
                        width: 165px;
                        height: 50px;
                        line-height: 46px;
                        text-align: center;
                        color: #edae5d;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 38px;
                        font-style: normal;
                        font-weight: 700;
                        letter-spacing: 3.8px;
                    }
                }
            }
            .dataR {
                margin-top: 40px;
                .itemR {
                    height: 142px;
                    margin-bottom: 20px;
                    display: flex;
                    img {
                        margin-top: 30px;
                        margin-left: 70px;
                    }
                    div {
                        flex: 1;
                        color: #fff;
                        margin-left: 60px;
                        margin-top: 22px;
                        .label {
                            font-size: 40px;
                            color: rgba(255, 208, 79, 1);
                            display: block;
                        }
                        .span {
                            font-size: 28px;
                            color: rgba(0, 239, 255, 1);
                        }
                    }
                }
            }
            .chartCircle {
                background: url("../assets/images/index/chart.png") no-repeat;
                height: 283px;
                line-height: 283px;
                width: 283px;
                text-align: center;
                margin: 50px auto;
                font-size: 42px;
                color: rgba(0, 242, 255, 1);
            }
            .chartHalf {
                height: 36px;
                float: left;
                margin-top: 20px;
                line-height: 36px;
                width: 50%;
                .color1 {
                    background: rgb(215, 226, 58);
                }
                .color2 {
                    background: rgba(58, 226, 133, 1);
                }
                .color3 {
                    background: rgba(2, 237, 250, 1);
                }
                .color4 {
                    background: rgba(42, 122, 251, 1);
                }
                .color5 {
                    background: rgba(181, 121, 251, 1);
                }
                .halfSpare {
                    margin-left: 10px;
                    width: 20px;
                    height: 14px;
                    display: block;

                    float: left;
                    margin-top: 11px;
                }
                .halfTitle {
                    margin-left: 5px;
                    float: left;
                    color: rgba(0, 239, 255, 1);
                    font-size: 20px;
                }
                .halfNum {
                    float: left;
                    font-size: 28px;
                    color: rgba(255, 208, 79, 1);
                }
            }
        }
        .height653:last-child {
            margin: 0;
        }
        .bgPng {
            .unitShow {
                display: flex; /* flex布局 */
                justify-content: flex-start; /* 左对齐 */
                flex-wrap: wrap; /* 换行 */
                padding: 0 70px;
                .item {
                    margin-top: 20px;
                    margin-right: 35px; /* 每个元素右间距设置为20px */
                    width: 125px;
                    height: 125px;
                    position: relative;
                    cursor: pointer;
                    /* 容器：负责居中、定位，让内部元素相对它布局 */
                    .circle-container {
                        position: relative;
                        width: 125px;
                        height: 125px;
                    }

                    /* 外层转动的圆圈：用伪元素或单独的 div 画圈，这里用伪元素示例 */
                    .rotating-circle {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border: 6px solid #4bb7e6; /* 圆圈边框颜色，模拟你图里的浅蓝色 */
                        border-left-color: #1b3b94; /* 左边边框颜色，模拟深蓝色，做出渐变/分段效果 */
                        border-radius: 50%; /* 让元素变成圆形 */
                        animation: rotateCircle 10s linear infinite; /* 旋转动画：5秒匀速、无限循环 */
                        box-sizing: border-box; /* 让边框包含在宽高内，避免撑开容器 */
                    }
                    .rotating-circle1 {
                        animation: rotateCircle1 10s linear infinite; /* 旋转动画：5秒匀速、无限循环 */
                    }

                    .rotating-circle2 {
                        animation: rotateCircle2 10s linear infinite; /* 旋转动画：5秒匀速、无限循环 */
                    }
                    .rotating-circle3 {
                        animation: rotateCircle3 10s linear infinite; /* 旋转动画：5秒匀速、无限循环 */
                    }

                    /* 文字容器：绝对定位覆盖在圆圈上，脱离旋转影响 */
                    .text-content {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%); /* 水平垂直居中 */
                        text-align: center; /* 文字内部居中 */
                        color: #4bb7e6; /* 文字颜色，匹配圆圈色调 */
                        font-size: 20px; /* 文字大小，按需调 */
                        /* 关键：让文字容器不受父元素旋转影响，因为它是绝对定位且自身无旋转 */
                    }

                    /* 数字和单位的细节样式，可按需自定义 */
                    .number {
                        font-size: 34px;
                        font-weight: bold;
                    }
                    .unit {
                        font-size: 17px;
                        display: block; /* 让单位换行，和你图里排版一致 */
                    }

                    /* 旋转动画关键帧：让圆圈转一圈 */
                    @keyframes rotateCircle {
                        from {
                            transform: rotate(0deg);
                        }
                        to {
                            transform: rotate(360deg);
                        }
                    }

                    @keyframes rotateCircle1 {
                        from {
                            transform: rotate(90deg);
                        }
                        to {
                            transform: rotate(360deg);
                        }
                    }
                    @keyframes rotateCircle2 {
                        from {
                            transform: rotate(180deg);
                        }
                        to {
                            transform: rotate(360deg);
                        }
                    }
                    @keyframes rotateCircle3 {
                        from {
                            transform: rotate(270deg);
                        }
                        to {
                            transform: rotate(360deg);
                        }
                    }
                }
            }
            .bgPngTitle {
                height: 36;
                margin-top: 24px;
                margin-left: 32px;
                color: #fff;
                font-size: 26px;
            }
            height: 240px;
            width: 910px;
            background: linear-gradient(0deg, rgba(7, 24, 57, 0.7), rgba(7, 24, 57, 0.7)),
                linear-gradient(90deg, rgba(20, 145, 255, 0.0384314) 0%, rgba(19, 147, 255, 0.025098) 25.97%, rgba(18, 151, 255, 0.0105882) 44.98%, rgba(20, 145, 255, 0) 74.64%);
        }
        .bgPng:first-child {
            margin-right: 10px;
        }
    }
    .title {
        background: url("../assets/images/index/titile.png") no-repeat left;
        background-size: 100%;
        background-color: linear-gradient(0deg, rgba(7, 24, 57, 0.7), rgba(7, 24, 57, 0.7)),
            linear-gradient(90deg, rgba(20, 145, 255, 0.0384314) 0%, rgba(19, 147, 255, 0.025098) 25.97%, rgba(18, 151, 255, 0.0105882) 44.98%, rgba(20, 145, 255, 0) 74.64%);
        font-size: 32px;
        height: 60px;
        line-height: 60px;
        padding-left: 24px;
        color: #fff;
        margin-bottom: 12px;
        label {
            color: #d9eaf5;
            text-shadow: 0px 0px 13.714px rgba(39, 175, 255, 0.56), 3.429px 3.429px 13.714px rgba(13, 24, 45, 0.26);
            font-family: "Alibaba PuHuiTi";
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-transform: uppercase;
        }
    }
    .header {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        height: 140px;
        width: 100%;
        /* background: url("../assets/images/index/topAll.png") no-repeat top left; */
        display: flex;
        div {
            background-color: #192745;
            position: absolute;
            top: 15px;
            right: 56px;
            height: 36px;
            color: #fff;
            line-height: 31px;
            b {
                color: #fff;
                text-align: center;
                font-family: "Alibaba PuHuiTi";
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
            label {
                color: #fff;
                text-align: center;
                font-family: "Alibaba PuHuiTi";
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
            span {
                color: #fff;
                text-align: center;
                font-family: "Alibaba PuHuiTi";
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
            }
        }
        .hearderImg {
            width: 100%;
        }
        /* .header-center {
            background: url("../assets/images/index/topCenter.png") no-repeat top left;
            text-align: center;
            width: 1130px;
            background-size: 100%;
            color: #fff;
            font-size: 0.8rem;
        }
        .header-left {
            display: flex;
            width: calc(((5760px - 1130px) / 2));
            .img1 {
                width: 146px;
                margin-top: 28px;
                margin-left: 5px;
                img {
                    width: 100%;
                }
            }
            .img2 {
                width: 610px;
                margin-top: 14px;
                margin-left: -146px;
            }
            .img3 {
                width: 341px;
                margin-top: 28px;
            }
            .img4 {
                font-size: 0.5px;
            }
            .img5 {
                font-size: 0.5px;
            }
            .img6 {
                font-size: 0.5px;
            }
            .img7 {
                font-size: 0.5px;
            }
            .img8 {
                font-size: 0.5px;
            }
        }
        .header-right {
            width: calc(((5760px - 1130px) / 2) / 5760px * (5760px - 1130px) / 2);
            text-align: center;
        } */
    }
    .centerContent {
        position: absolute;
        left: 40px;
        top: 182px;
        right: 40px;
        bottom: 81px;
        z-index: 1;
        .leftContent {
            height: 100%;
            width: 1585px;
            float: left;
        }
        .centerContent {
            width: 2510px;
            margin: 0 20px;
            height: 100%;
            float: left;
        }
        .rightContent {
            height: 100%;
            width: 1585px;
            float: right;
            .project-echarts {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                margin-bottom: 28px;
                height: 373px;
                .table {
                    width: 781px;
                    height: 373px;
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    margin-right: 12px;
                }

                .dedicated-line {
                    height: 373px;
                    flex: 1;
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    img {
                        width: 100%;
                        margin-top: 40px;
                    }
                }
            }
            .project-line {
                display: flex;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                margin-bottom: 28px;
                .table {
                    width: 781px;
                    padding: 19.727px 25.533px 32px 24px;
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    margin-right: 12px;

                    .table-header {
                        height: 100px;
                        line-height: 100px;
                        color: #04abff;
                        text-align: center;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 26px;
                        font-style: normal;
                        font-weight: 400;
                        display: flex;
                    }
                    .table-body {
                        height: 74px;
                        line-height: 74px;
                        color: #04abff;
                        text-align: center;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 26px;
                        font-style: normal;
                        font-weight: 400;
                        display: flex;
                        .col1 {
                            background: url("../assets/images/index/23.png") no-repeat;
                            background-position-x: center;
                            background-position-y: center;
                            color: #59ffe5;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 26px;
                            font-style: normal;
                            font-weight: 400;
                        }
                        .col2 {
                            color: #ffd04f;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 28px;
                            font-style: normal;
                            font-weight: 700;
                            letter-spacing: 0.84px;
                        }
                        .col3 {
                            .level3 {
                                background: rgba(44, 154, 46, 0.2);
                                color: #1ade1d;
                            }
                            .level1 {
                                color: #ff1818;
                                background: rgba(215, 75, 75, 0.2);
                            }
                            .level2 {
                                color: #fff01f;
                                background: rgba(255, 188, 0, 0.2);
                            }
                            div {
                                border-radius: 4px;
                                display: inline;
                                align-items: center;
                                text-align: center;
                                font-family: "Alibaba PuHuiTi";
                                font-size: 24px;
                                font-style: normal;
                                font-weight: 400;
                                opacity: 0.896;
                                padding: 5px 20px;
                            }
                        }
                        .col4 {
                            color: #ffd04f;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 28px;
                            font-style: normal;
                            font-weight: 700;
                            letter-spacing: 0.84px;
                        }
                    }
                    .col1 {
                        border-top: 1px solid #00366b;
                        border-left: 1px solid #00366b;
                        border-bottom: 1px solid #00366b;
                        width: 206px;
                    }
                    .col2 {
                        border-top: 1px solid #00366b;
                        border-left: 1px solid #00366b;
                        border-bottom: 1px solid #00366b;
                        width: 205px;
                    }
                    .col3 {
                        border-top: 1px solid #00366b;
                        border-left: 1px solid #00366b;
                        border-bottom: 1px solid #00366b;
                        width: 170px;
                    }
                    .col4 {
                        border: 1px solid #00366b;
                        flex: 1;
                    }
                }
                .dedicated-line {
                    height: 374px;
                    flex: 1;
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    .dedicated-line-text {
                        position: absolute;
                        bottom: 21px;
                        text-align: center;
                        width: 100%;
                        color: #00efff;
                        text-align: center;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.6px;
                        label {
                            color: #edae5d;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 24px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            letter-spacing: 0.72px;
                        }
                    }
                    .dedicated-line-img {
                        background: url("../assets/images/index/bg59.png") no-repeat top left;
                        background-size: 100%;
                        height: 100%;
                        position: relative;
                        .zx {
                            display: flex;
                            padding: 8px 26px;
                            justify-content: center;
                            align-items: center;
                            border-top: 1px solid rgba(0, 191, 255, 0);
                            border-bottom: 1px solid rgba(0, 191, 255, 0);
                            background: linear-gradient(270deg, rgba(0, 255, 229, 0) 0%, rgba(0, 255, 229, 0.2) 50%, rgba(0, 255, 229, 0) 100%);
                            color: #edae5d;
                            text-align: center;
                            text-shadow: 0px 0px 2px rgba(0, 255, 229, 0.1), 0px 0px 4px rgba(0, 255, 229, 0.25);
                            font-family: "Alibaba PuHuiTi";
                            font-size: 26px;
                        }
                        .one {
                            position: absolute;
                            bottom: 67px;
                            left: 75px;
                        }
                        .two {
                            position: absolute;
                            bottom: 100px;
                            left: 304px;
                        }
                        .three {
                            position: absolute;
                            bottom: 67px;
                            right: 64px;
                        }
                        img {
                            position: absolute;
                        }
                        .img1 {
                            top: 102px;
                            left: 0;
                        }
                        .img2 {
                            top: 62px;
                            left: 71px;
                        }
                        .img3 {
                            top: 102px;
                            left: 243px;
                        }
                        .img4 {
                            top: 26px;
                            right: 275px;
                        }
                        .img5 {
                            top: 102px;
                            right: 189px;
                        }
                        .img6 {
                            top: 62px;
                            right: 71px;
                        }
                        .img7 {
                            top: 102px;
                            right: 39px;
                        }
                    }
                }
            }
            .internet {
                height: 382px;
                width: 100%;
                display: flex;
                margin-bottom: 28px;
                .internet-right {
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    margin-left: 12px;
                    text-align: right;
                    width: 527px;
                    .internet-left-wrapper {
                        padding: 24px 32px;
                        text-align: left;
                    }
                    .internet-left-title {
                        color: #fff;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 26px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.78px;
                    }
                    .internet-right-img {
                        background: url("../assets/images/index/22.png") no-repeat top left;
                        background-size: 100%;
                        height: 207px;
                        margin-top: 8px;
                    }
                    .internet-right-text {
                        text-align: center;
                        margin-top: 11px;
                        color: #00efff;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.6px;
                        span {
                            margin: 0 10px;
                        }
                        label {
                            color: #edae5d;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 24px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            letter-spacing: 0.72px;
                        }
                    }
                }
                .internet-center {
                    flex: 1;
                    height: 382px;
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    .internet-center-img {
                        margin-top: 86px;
                        background: url("../assets/images/index/11.png") no-repeat top left;
                        background-size: 100%;
                        height: 100%;
                        position: relative;
                        .arrow-container {
                            height: 18px;
                            position: absolute;
                            top: -6px;
                            right: -58px;
                            img {
                                vertical-align: middle;
                            }
                            .arrow {
                                font-size: 20px; /* 箭头大小，可按需调整 */
                                animation: arrowMove 1.5s infinite ease-in-out;
                                opacity: 0.5; /* 初始透明度，营造渐变效果基础 */
                            }
                            /* 让不同箭头动画有延迟，形成依次动的视觉 */
                            .arrow:nth-child(2) {
                                animation-delay: 0.3s;
                            }
                            .arrow:nth-child(3) {
                                animation-delay: 0.6s;
                            }
                            @keyframes arrowMove {
                                0% {
                                    transform: translateX(0);
                                    opacity: 0.5;
                                }
                                50% {
                                    transform: translateX(8px); /* 移动距离，可按需调整 */
                                    opacity: 1;
                                }
                                100% {
                                    transform: translateX(0);
                                    opacity: 0.5;
                                }
                            }
                        }
                        .label1 {
                            color: #fff;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 36px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 49.392px;
                            position: absolute;
                            top: -2px;
                            left: 181px;
                            text-align: center;
                        }
                        .label2 {
                            color: #ffe577;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 49.392px;
                            position: absolute;
                            top: 121px;
                            left: 23px;
                        }
                        .label3 {
                            color: #59ffe5;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 49.392px;
                            position: absolute;
                            top: 121px;
                            left: 206px;
                        }
                        .label4 {
                            color: #6eeeff;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 49.392px;
                            position: absolute;
                            top: 121px;
                            right: 18px;
                        }
                    }
                }
                .internet-left {
                    text-align: left;
                    margin-right: 12px;
                    background: linear-gradient(90deg, rgba(20, 145, 255, 0.04) 0%, rgba(19, 147, 255, 0.03) 25.97%, rgba(18, 151, 255, 0.01) 44.98%, rgba(20, 145, 255, 0) 74.64%),
                        rgba(7, 28, 57, 0.7);
                    height: 382px;
                    width: 527px;
                    .internet-left-wrapper {
                        padding: 24px 32px;
                    }
                    .internet-left-title {
                        color: #fff;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 26px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.78px;
                    }
                    .internet-left-process {
                        color: #00efff;
                        text-align: center;
                        font-family: "Alibaba PuHuiTi";
                        font-size: 20px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.6px;
                        span {
                            color: #edae5d;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 24px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                            letter-spacing: 0.72px;
                        }
                    }
                    .internet-left-content {
                        background: url("../assets/images/index/10.png") no-repeat top left;
                        background-size: 100%;
                        width: 464px;
                        height: 252px;
                        position: relative;
                        .label {
                            color: #b8d3f1;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 18px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }
                        .label2 {
                            color: #fff9a8;
                            font-family: Inter;
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: normal;
                        }

                        .b {
                            color: #00eaff;
                            font-family: Inter;
                            font-size: 32px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: normal;
                            margin-right: 4px;
                        }
                        .percent {
                            color: #fff;
                            font-family: Inter;
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }
                        .text {
                            color: #e9fbff;
                            text-align: center;
                            font-family: "Alibaba PuHuiTi";
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: normal;
                        }
                        .posi1 {
                            position: absolute;
                            bottom: 114px;
                            left: 0;
                        }
                        .posi2 {
                            position: absolute;
                            bottom: 47px;
                            left: 0;
                        }
                        .posi3 {
                            position: absolute;
                            top: -4px;
                            right: 76px;
                        }
                        .posi4 {
                            position: absolute;
                            top: 34px;
                            right: 76px;
                        }
                        .posi5 {
                            position: absolute;
                            top: 112px;
                            right: 2px;
                        }
                        .posi6 {
                            position: absolute;
                            top: 158px;
                            right: 0;
                        }
                        .posi7 {
                            position: absolute;
                            top: 134px;
                            left: 183px;
                        }
                        .posi8 {
                            position: absolute;
                            top: 150px;
                            left: 209px;
                        }
                    }
                }
            }
        }
    }
}
.allBg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>
